<!--
 * @Description: 
 * @Version: 1.0
 * @Author: yzq
 * @Date: 2025-04-16 14:14:50
 * @FilePath: \web\src\views\system\logManage\loginLog\index.vue
 * @LastEditors: yzq
 * @LastEditTime: 2025-05-29 16:33:24
-->
<template>
  <div>
    <pro-table
      ref="tableRef"
      :data="tableData"
      :total="total"
      :columns="columns"
      :tool-button="false"
      @search="commEvent.onSearch"
      :page-change="commEvent.onPageChange"
    >
      <!-- 状态 -->
      <template #result="{ row }">
        <el-tag v-if="row.result === 1" type="success">成功</el-tag>
        <el-tag v-else type="danger">失败</el-tag>
      </template>
      <!-- 操作栏 -->
      <template #operation="{ row }">
        <el-button type="primary" link @click="commEvent.onDetail(row)">详情</el-button>
      </template>
    </pro-table>
    <DetailDialog ref="detailDialogRef"></DetailDialog>
  </div>
</template>

<script setup lang="ts">
import { h, onMounted, ref } from "vue"
import ProTable from "@/components/ProTable/index.vue"
import DetailDialog from "./components/DetailDialog.vue"
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"
import dayjs from "dayjs"
import { getLoginLogPageListApi } from "@/api/modules/system"
import { SystemSpace } from "@/api/interface/system"
// 参数
const tableRef = ref<ProTableInstance>() // 表格实例
const detailDialogRef = ref<InstanceType<typeof DetailDialog>>()
const tableData = ref<SystemSpace.LoginLogPageList[]>([]) // 表格数据
const total = ref<number>(0) // 数据总数
// 页码参数
const pageParams = ref({
  pageIndex: 1,
  pageSize: 10
})
// 表格列配置
const columns: ColumnProps<SystemSpace.LoginLogPageList>[] = [
  {
    prop: "sort",
    label: "序号",
    width: 80,
    render: scope => h("span", scope.$index + 1 + (pageParams.value.pageIndex - 1) * pageParams.value.pageSize)
  },
  { prop: "uid", label: "操作人", isShow: false, search: { el: "input" } },
  { prop: "id", label: "日志编号", width: 120 },
  { prop: "account", label: "登录用户", width: 120 },
  { prop: "ip", label: "ip地址", width: 120, search: { el: "input" } },
  { prop: "browser", label: "浏览器类型", width: 120 },
  { prop: "os", label: "操作系统", width: 300 },
  {
    prop: "result",
    label: "操作状态",
    width: 120,
    enum: [
      { label: "成功", value: 1 },
      { label: "失败", value: 2 }
    ],
    search: { el: "select" }
  },
  { prop: "loginTime", label: "登录时间", width: 180 },
  { prop: "msg", label: "登录信息" },
  {
    prop: "time",
    label: "操作时间",
    width: 120,
    isShow: false,
    search: { el: "date-picker", props: { type: "datetimerange" }, span: 2 }
  },
  { prop: "operation", label: "操作", width: 120, fixed: "right" }
]
// 事件集合
const commEvent = {
  // 获取表格数据
  getTableData: async (params: SystemSpace.LoginLogPageListQuery) => {
    const { data } = await getLoginLogPageListApi(params)
    tableData.value = data.result
    total.value = data.totalCount
  },
  // 查询
  onSearch: () => {
    const _search = tableRef.value?.searchParam
    let searchForm: any = JSON.parse(JSON.stringify(_search))
    pageParams.value.pageIndex = 1
    if (_search?.time) {
      searchForm = {
        ...searchForm,
        startTime: dayjs(_search.time[0]).format("YYYY-MM-DD HH:mm:ss"),
        endTime: dayjs(_search.time[1]).format("YYYY-MM-DD HH:mm:ss"),
        time: undefined
      }
    }
    commEvent.getTableData({ ...pageParams.value, ...searchForm })
  },
  // 分页
  onPageChange: (page: number, size: number) => {
    pageParams.value.pageIndex = page
    pageParams.value.pageSize = size
    const _search = tableRef.value?.searchParam
    let searchForm: any = JSON.parse(JSON.stringify(_search))
    if (_search?.time) {
      searchForm = {
        ...searchForm,
        startTime: dayjs(_search.time[0]).format("YYYY-MM-DD HH:mm:ss"),
        endTime: dayjs(_search.time[1]).format("YYYY-MM-DD HH:mm:ss"),
        time: undefined
      }
    }
    commEvent.getTableData({ ...pageParams.value, ...searchForm })
  },
  // 详情
  onDetail: (row: SystemSpace.LoginLogPageList) => {
    detailDialogRef.value?.handleOpen(row.id)
  }
}
onMounted(() => {
  commEvent.getTableData(pageParams.value)
})
</script>

<style lang="scss" scoped></style>
